<template>
  <el-card class="contanier">
    <el-table
      :data="permissionList"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      :expand-row-keys="['1']"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="名称" sortable></el-table-column>
      <el-table-column prop="code" label="权限值" sortable></el-table-column>
      <el-table-column prop="toCode" label="跳转权限值"></el-table-column>
      <el-table-column prop="name" label="操作">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            class="el-icon-plus"
            size="mini"
            @click="showDialog(row)"
          />
          <el-button type="warning" class="el-icon-edit" size="mini" />
          <el-button type="danger" class="el-icon-delete" size="mini" />
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加权限 -->
    <el-dialog :title="title" :visible.sync="visible" width="50%">
      <el-form label-width="100px">
        <el-form-item label="父级名称" v-show="permission.level !== 1">
          <el-input disabled v-model="permission.name"></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="editPermission.name"></el-input>
        </el-form-item>
        <el-form-item label="功能权限值">
          <el-input v-model="editPermission.code"></el-input>
        </el-form-item>
        <el-form-item label="跳转路由权限值" v-show="permission.level === 3">
          <el-input v-model="editPermission.toCode"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  name: 'Permission',
  data() {
    return {
      permissionList: [{}],
      permission: {}, //当前点击的这个菜单
      editPermission: {
        level: '',
        code: '',
        toCode: '',
        name: ''
      },
      visible: false
    }
  },
  mounted() {
    this.getPrimissionList()
  },
  methods: {
    // 获取permission列表
    async getPrimissionList() {
      let res = await this.$API.permission.reqPermissionList()
      this.permissionList = res.children
    },
    // 显示dialog
    showDialog(row) {
      this.visible = true
      this.permission = row
    },
    // 添加菜单
    async submit() {
      let { level, code, toCode, name } = this.editPermission
      await this.$API.permission.reqSavePermission({
        level: level + 1,
        code,
        toCode,
        name
      })
      this.$message({
        type: 'success',
        message: `添加${this.title}成功`
      })
      // 清空
      this.editPermission = {
        level: '',
        code: '',
        toCode: '',
        name: ''
      }
      this.visible = false
      this.getPrimissionList()
    }
  },
  computed: {
    title() {
      let title = '添加'
      switch (this.permission.level) {
        case 1:
          title += '一级菜单'
          break
        case 2:
          title += '二级菜单'
          break
        case 1:
          title += '三级菜单'
          break
      }
      return title
    }
  }
}
</script>

<style></style>
